<template>
  <div class="music-search">
    <search-box v-model="searchContent" @clear-search-content="searchContent = ''" @search-music="handleSearchMusic" />

    <search-detail v-if="searchFlag" :search-content="searchContent" />
    <template v-else>
      <history-box @search-music="handleSearchMusic" />
      <hot-box @search-music="handleSearchMusic" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import searchBox from "./components/searchBox.vue";
import historyBox from "./components/historyBox.vue";
import hotBox from "./components/hotBox.vue";
import searchDetail from "./components/searchDetail.vue";
import useHistoryStore from "@/store/historyStore";
const searchContent = ref(""),
  searchFlag = ref(false);
const { addHistoryItem } = useHistoryStore();

const handleSearchMusic = (item: string) => {
  if (!item.trim().length) {
    searchFlag.value = false;
    return showToast("请先输入搜索内容");
  }
  addHistoryItem(item);
  searchContent.value = item;
  searchFlag.value = true;
};
</script>

<style scoped lang="scss">
.music-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 1003;
  background: linear-gradient(to bottom left, #363131, #383535, #585454);
  color: #fff;
}
</style>
